<template>
  <div id='tree' ref='tree'></div>
</template>

<script>

import FamilyTree from '@balkangraph/familytree.js'

export default {
  name: 'tree',
  data() {
    return {
      nodes: [
        { id: 1, pids: [2], name: '安娜', gender: 'female', img:''},
        { id: 2,  pids: [1],  name: '伊皮凡', gender: 'male', img: '' },
        { id: 3, mid: 1, fid: 2, pids:[5], name: '雅科夫', gender: 'male', img: '' },
        { id: 4,mid: 1, fid: 2 , name: '莱奥尼德', gender: 'male', img: '' },
        { id: 5,  pids: [3], name: '玛蒂尔达', gender: 'female', img: '' },
        { id: 6,  mid: 1, fid: 2,pids: [7], name: '奥尔加', gender: 'female', img: '' },
        { id: 7,  pids: [6], name: '格奥尔吉 切尔班诺夫', gender: 'male', img: '' },
        { id: 8, mid: 1, fid: 2 , name: '叶莲娜', gender: 'female', img: '' },
        { id: 9, mid: 1, fid: 2, name: '娜塔莉亚', gender: 'female', img: '' },
        { id: 10, mid: 1, fid: 2, name: '瓦伦蒂娜', gender: 'female', img: '' },
        { id: 11,  pids: [10],name: '瓦西里 奥斯托斯拉夫斯基', gender: 'male', img: ''},
        { id: 12, mid: 10, fid: 11, name: '伊万', gender: 'male', img: ''},
        { id: 13, fid:12,  name: '伊莲娜', gender: 'female', img: ''},
        { id:14,  mid: 6, fid: 7, name:'儿子',gender:'male',img:'' },
        { id:15, mid: 6, fid: 7, name:'二女儿',gender:'female', img:'' },
        { id:16, mid: 6, fid: 7, name:'大女儿',gender:'female', img:'' },
        { id:17,  pids:[3], name:'雅科夫的第一任妻子',gender:'female',img:'' },
        { id:18, mid: 17, fid: 3, name:'安德烈',gender:'male',img:'' },
        { id:19, mid: 5, fid: 3, name:'谢尔盖',gender:'male',img:'' },
        { id:20,  name:'谢尔盖妻子',gender:'female',img:'' },
        { id:21, mid: 20, fid:19, name:'叶夫根尼娅 谢尔盖耶夫娜',gender:'female',img:'' },
        { id:22, mid: 5, fid: 3, name:'叶夫根尼娅 伊瓦申科',gender:'female',img:'' },
        { id:23, mid: 22, fid: 24, name:'娜塔莎 沃丁',gender:'female',img:'' },
        { id:24,pids:[22],  name:'尼古拉',gender:'male',img:'' },
        { id:25, mid: [22], fid: [24], name:'作者妹妹',gender:'female',img:'' },


      ]
    }
  },
  methods: {
    mytree: function (domEl, x) {
      this.family = new FamilyTree(domEl, {
        nodes: x,
        nodeBinding: {
          field_0: 'name',
          img_0: 'img',
          sp_0: '简介'
        },
        nodeTreeMenu: true
      })
    }
  },
  mounted() {
    this.mytree(this.$refs.tree, this.nodes)
  }
}
</script>

<style scoped>
</style>
<style scoped>
.window {
  width: 100%;
  height: 100vh;
}
</style>